<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>vuejs</title>
    <script src="vue.js"></script>
</head>
<body>

<template id="myComponent">
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>{{myName}}</td>
            <td>{{myAge}}</td>
        </tr>
        <tr>
            <td>{{name}}</td>
            <td>{{age}}</td>
        </tr>
    </table>
</template>

<div id="app">
    <my-component v-bind:my-name="name" :my-age="age"></my-component>
    <hr>
    <table>
        <tr>
            <td>{{name}}</td>
            <td>{{age}}</td>
        </tr>
    </table>
</div>

</body>
<script src="vue.js"></script>
<script>
    var model = {
        name: '小兵',
        age: 28
    };
    var vm = new Vue({
        el: '#app',
        data: model,
        components: {
            'my-component': {
                template: '#myComponent',
                props: ['myName', 'myAge']
            }
        }
    })
</script>
</html>